<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
    <style>
        .left-enter-active{
            animation: aaa 1.5s;
        }
        .left-leave-active{
            animation: aaa 1.5s reverse;
        }

        @keyframes aaa {
            0%{
                opacity: 0;
                transform: translateX(-100%);
            }
            100%{
                opacity: 1;
                transform: translateX(0px);
            }
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 子传父靠的是事件 -->
        <!-- 导航栏 -->
        <!-- 定义在根组件中(方法)    @myevent自定义事件  没有带小括号的时候 -->
    <navbar @myevent="changeshow"></navbar>
    <!-- 侧边栏 -->
    <!-- <siderbar v-show="isShow"></siderbar> -->

    <!-- 可以做成点击会改变的,改变其class来改变动画的效果 -->
    <siderbar v-show="isShow" mode="left"></siderbar>

    </div>
  
    <script>
        Vue.component("navbar",{
            template:`<div style="width: 100%;height: 150px;border: 3px solid;">
                <button @click="showAll">出现抽屉</button>
                </div>
            `,
           
            methods:{
                showAll(){
                    console.log("父类快把isShow取反")
                    // $emit固定用法,自定义的名称(不是方法名称_______)  触发
                    // this.$emit("myevent")
                    // 也可以传递一些数据,状态
                    this.$emit("myevent",10000)
                }
            }
        }) 
        Vue.component("siderbar",{
            props:["mode"],
            template:` 
            <transition :name="mode">
            <ul>
                 <li>sadfa</li>
                 <li>fasd</li>
                    </ul>
                </transition>
            `
        }) 
        // 根组件
        new Vue({
            el:"#box",
            data:{
                isShow:false

            },
            methods:{
                // 没带小括号,可以接收一个data 可以收到传递过来的参数
                changeshow(data){
                    console.log("我是父类中的",data)
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>